<template>
  <div>
    <div class="header">
      <el-row type="flex">
        <el-button type="primary" icon="el-icon-document" size="mini" @click="handleClick(1)">配置项详情</el-button>
        <el-button type="primary" icon="el-icon-document" size="mini" @click="handleClick(2)">详情修改</el-button>
      </el-row>
    </div>
    <div class="content">
      <div :class="{'show':show==1,'hidden':show!=1}">
        <!-- 真正的一行 -->
        <el-row class="row-one">
          <el-tag style="margin-right:1rem;" type="info">属性名称</el-tag>
          <el-tag style="margin-right:1rem;" type="primary">{{ rowData.attribute_name }}</el-tag>
          <el-tag style="margin-right:1rem;" type="info">属性代码</el-tag>
          <el-tag style="margin-right:1rem;" type="primary">{{ rowData.attribute_code ? rowData.attribute_code : '无' }}</el-tag>
        </el-row>
        <el-row class="row-one">
          <el-tag style="margin-right:1rem;" type="info">是否是默认选项</el-tag>
          <el-tag v-if="rowData.is_default_option === 1" style="margin-right:1rem;" type="success">是</el-tag>
          <el-tag v-if="rowData.is_default_option === 0" style="margin-right:1rem;" type="danger">否</el-tag>
          <el-tag style="margin-right:1rem;" type="info">属性类型</el-tag>
          <el-tag v-if="rowData.attribute_type === 10" style="margin-right:1rem;" type="primary">系统</el-tag>
          <el-tag v-if="rowData.attribute_type === 20" style="margin-right:1rem;" type="warning">自定义</el-tag>
        </el-row>
        <el-row class="row-one">
          <el-tag style="margin-right:1rem;" type="info">规格排序</el-tag>
          <el-tag style="margin-right:1rem;" type="primary">{{ rowData.sort }}</el-tag>
          <el-tag style="margin-right:1rem;" type="info">添加时间</el-tag>
          <el-tag style="margin-right:1rem;" type="primary">{{ rowData.created_at }}</el-tag>
        </el-row>
        <el-row class="row-one">
          <el-tag style="margin-right:1rem;" type="info">是否显示</el-tag>
          <el-tag v-if="rowData.is_show === 1" style="margin-right:1rem;" type="success">是</el-tag>
          <el-tag v-if="rowData.is_show === 0" style="margin-right:1rem;" type="danger">否</el-tag>
        </el-row>
        <el-row class="row-one">
          <el-tag style="margin-right:1rem;" type="info">属性备注</el-tag>
          <el-tag style="margin-right:1rem;" type="primary">{{ rowData.note ? rowData.note : '无' }}</el-tag>
        </el-row>
      </div>
      <div :class="{'show':show==2, 'hidden':show!=2}">
        <el-row class="row-one">
          <el-tag style="margin-right:1rem;" type="info">是否是默认选项</el-tag>
          <el-select v-model="default_option_value" placeholder="请选择">
            <el-option
              v-for="item in is_default_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
            </el-option>
          </el-select>
          <el-button type="primary" style="margin-left:1rem;" @click="handleToUpdateProperty(0)">修改</el-button>
        </el-row>
        <el-row class="row-one">
          <el-tag style="margin-right:1rem;" type="info">属性类型</el-tag>
          <el-select v-model="attribute_type_value" placeholder="请选择">
            <el-option
              v-for="item in attribute_type_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
            </el-option>
          </el-select>
          <el-button type="primary" style="margin-left:1rem;" @click="handleToUpdateProperty(1)">修改</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { debounce } from '@/utils'
import { updateGoodsAttributeNameProperty } from '@/api/youhu-shop/V1/goods/attribute'
export default
{
  // 组件名称
  name: 'TabelInfo',
  // 组件
  components:
    {

    },
  props:
    {
      rowData: {
        type: Object,
        default: () =>
        {
          return {}
        }
      },
      show: {
        type: Number,
        default: 1
      }

    },
  // 数据
  data()
  {
    return {
      showComponent: 1,
      updatePropertyArray: ['is_default_option', 'attribute_type'],
      // 修改参数
      updateParam: {
        id: 0,
        // 规格名属性
        property_name: null,
        // 规格名属性值
        property_value: null
      },
      // 是否是默认选项options
      is_default_options: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      // 规格类型选项
      attribute_type_options: [{
        value: 10,
        label: '系统'
      }, {
        value: 20,
        label: '自定义'
      }],
      // 是否是默认选项
      default_option_value: null,
      // 规格名类型值
      attribute_type_value: null
    }
  },
  // 计算属性
  computed:
    {

    },
  // 监听
  watch:
  {

  },
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {
  },
  // 挂载之前
  beforeMount()
  {
  },
  // 挂载 --常用
  mounted()
  {
    this.default_option_value = this.rowData.is_default_option
    this.attribute_type_value = this.rowData.attribute_type
    this.updateParam.id = this.rowData.id
  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
  {
    handleClick(key)
    {
      this.$emit('update:show', key)
      this.showComponent = key
    },
    // 更改属性值
    handleToUpdateProperty: debounce(function(index)
    {
      this.updateParam.property_name = this.updatePropertyArray[index]

      if (index === 0)
      {
        this.updateParam.property_value = this.default_option_value
      }

      if (index === 1)
      {
        this.updateParam.property_value = this.attribute_type_value
      }

      updateGoodsAttributeNameProperty(this.updateParam).then(res =>
      {
        if (res && res.code === 0)
        {
          this.event.$emit('updateGoodsAttributeNameData', true)

          this.$message(
            {
              message: res.msg,
              type: 'success'
            })
        }
      })
    }, 600)

  }
}
</script>
<style lang='scss' scoped>
.row-one{
   margin-bottom: 1rem;
   width: 100rem;
   height: auto;
}
.header{
  margin-bottom:1rem;
}
.show{
  display: block;
}
.hidden{
  display: none;
}

</style>
